<template>
  <div class="comment-list">
    <CommentItem
      v-for="comment in comments"
      :key="comment.id"
      :comment="comment"
      :fetch-sub-comments="fetchSubComments"
      @submit-reply="handleSubmitReply"
    >
      <template v-if="comment.children && comment.children.length">
        <CommentList
          :comments="comment.children"
          :fetch-sub-comments="fetchSubComments"
          @submit-reply="handleSubmitReply"
        />
      </template>
    </CommentItem>
  </div>
</template>

<script>
import CommentItem from './CommentItem.vue'
export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array,
      default: () => []
    },
    fetchSubComments: {
      type: Function,
      required: true
    }
  },
  components: { CommentItem },
  methods: {
    handleSubmitReply(payload) {
      console.log('CommentList received submit-reply event:', payload)
      this.$emit('submit-reply', payload)
    }
  }
}
</script>

<style scoped>
.comment-list {
  margin-left: 0;
}
</style>